<template>
	<view class="page-body" :style="'height:'+height+'px'">
		<scroll-view class="nav-left" scroll-y style="height:100%" :scroll-top="scrollLeftTop" scroll-with-animation>
			<view class="nav-left-item" :key="item.ra_id" v-for="(item,index) in chainList">
				<view  @click="categoryClickMain(item)" class="one" :class="[(oneActive==item.ra_id)?'active':'']">
				{{item.chain_name.length>5?item.chain_name.slice(0,5):item.chain_name}}
					<view :class="oneActive==item.ra_id?'':'xia'" class="shang" ></view>
				</view>
				<view  @click="categoryClickMain(item1)" class="two" :class="[chain_id==item1.ra_id?'active':'',oneActive==item.ra_id?'':'noshow']" v-for="item1 in item.children" :key='item1.ra_id'>{{item1.chain_name.length>5?item1.chain_name.slice(0,5):item1.chain_name}}</view>
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" :style="'height:'+height+'px'" scroll-with-animation>
			<view class="box">
				<view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in childrenList" :key="i" @click="cart(item)">
					<image v-if="item.thumb" :src="item.thumb" />
					<image v-else src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/7/2021/07/2.png" mode=""></image>
					<view>{{item.chain_name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { GetIndustryChain,GetUseInfo,myIndustrychain1,myIndustrychain,GetAreaChain } from '../utils/api.js'
	export default {
		data() {
			return {
				name: "wkiwi",
				height: 300,
				categoryActive: 0,
				scrollTop: 0, 
				scrollLeftTop: 0,
				// scrollHeight: 0,
				chainList:[],
				childrenList:[],
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51,
				paddingBottomHeight:0,
				chain_id:'',
				chainList:[],
				oneActive:''
			}
		},
		created(){
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			this.getList()
		},
		onLoad: function () {
			// this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
		},
		onReady() {
			// this.getHeightList();
		},
		beforeDestroy(){
			
		},
		methods: {
			// getList(){
			// 	GetIndustryChain().then(res=>{
			// 		res.data.unshift({industry_name:'不限',chain:[{chain_name:'全产业链',id:'',chain_id:''}]})
			// 		this.chainList = res.data
			// 	})
			// },
			// categoryClickMain(index) {
			// 	uni.showToast({
			// 		title: this.chainList[index].industry_name,
			// 		icon: "none",
			// 	})
			// 	this.categoryActive = index;
			// },
			getList(){
				uni.showLoading({ mask:true,
					title:'正在加载'
				})
				GetAreaChain({role_id:uni.getStorageSync('role_id')}).then(res=>{
					res.data.unshift({chain_name:'不限',ra_id:0})
					this.chainList = res.data
					this.chain_id = this.chainList[0].ra_id 
					// this.oneActive = this.chainList[0].ra_id
					this.childrenList = [{chain_name:'全产业链',id:''}]
					uni.hideLoading()
				})
			},
			categoryClickMain(item) {
				console.log(item)
				if(this.oneActive == item.ra_id){
					this.oneActive = ''
					return
				}
				if(item.ra_id==0){
					this.oneActive = item.ra_id
					this.chain_id= item.ra_id
					this.childrenList = [{chain_name:'全产业链',id:''}]
					return
				}
				if(item.pid!=0){
					this.oneActive = item.pid
					this.childrenList = item.children
					this.chain_id= item.ra_id
				}else if(item.pid==0){
					this.oneActive = item.ra_id
					this.childrenList = item.children[0].children
					this.chain_id= item.children[0].ra_id
				}
			},
			cart(item) {
				this.chain = item
				this.$emit('changeChain',this.chain)
			}
		},
		components: {
		}
	}
</script>

<style lang="scss" scoped>
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		background: #fafafa;
	}

.s_s{
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.input_s{
	width: 96%;
	height: 28px;
	background-color: #e7e7e7;
	border-radius: 14px;
	color: #888;
	font-size: 14px;
	text-align: center;
	line-height: 28px;
}
	.type_img{
		width: calc(100% - 20px);
		margin: 15px 0;
		margin-left: 10px;
		// height: 75px;
		border-radius: 4px;
	}
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		background: #fafafa;
		overflow: auto;
	}

	.nav-left-item {
		.one{
			height: 100upx;
			border-right: solid 1px #f1f1f1;
			border-bottom: solid 1px #f1f1f1;
			font-size: 14px;
			display: flex;
			align-items: center;
			// justify-content: center;
			text-indent:10px;
			position: relative;
			
		}		
		.two{
			height: 100upx;
			border-right: solid 1px #f1f1f1;
			border-bottom: solid 1px #f1f1f1;
			font-size: 12px;
			display: flex;
			color: #666;
			align-items: center;
			// justify-content: center;
			text-indent:16px;
			transition: all 0.5s;
			opacity: 1;
		}		
		.noshow{
			height: 0px;
			opacity: 0;
			overflow: hidden;
		}
		.shang{
			position: absolute;
			width: 6px;
			height: 6px;
			border-top: 1px solid #ff9933;
			border-right: 1px solid #ff9933;
			transition: all 0.5s;
			transform: rotate(-45deg);
			right: 4px;
			top: 24px;
		}
		.xia{
			border-top: 1px solid #333;
			border-right: 1px solid #333;
			transform: rotate(135deg);
			top: 22px;
		}
	}
	.nav-right {
		width: 75%;
	}
	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		/* width: 100%; */
		/* min-height: 100vh; */ 
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}
	.box:last-child {
		border: none;
		// min-height:100vh;
	}
	.nav-right-item {
		width: calc(33.3% - 22upx);
		height: 220upx;
		float: left;
		text-align: center;
		padding: 11upx;
		font-size: 28upx;
		background: #fff;
	}

	.nav-right-item image {
		width: 100upx;
		height: 100upx;
	}

	.active {
		color: #FF9933 !important;
		background: #fff;
		border-right: 0;
	}
	::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
   width: 0;
   height: 0;
   color: transparent;
}
</style>
